<template>
    <view class="page">
        <!-- 卡片提示 -->
        <view class="g-tips">
            <view class="g-user-info userbg">
				<view class="top ">
					<image src="../../static/images/user/card4.png" mode="widthFix"></image>
					<text class="u-user-name f-two-ellipsis">{{userInfo.realname||userInfo.nickname}}</text>
				</view>
                <text class="u-user-phone f-one-ellipsis">手机:&nbsp;{{userInfo.mobile||''}}</text>
            </view>
            <view class="g-tips-text">
                <view class="u-price-tips red">¥{{nPrice}}</view>
                <view class="u-arrow"></view>
                <view class="yellow">转出</view>
            </view>
            <view class="g-user-info elsebg">
				<view class="top">
					<image src="../../static/images/user/card4.png" mode="widthFix"></image>
					<text class="u-user-name f-two-ellipsis">{{elseUserInfo.name}}</text>
				</view>
                <text class="u-user-phone f-one-ellipsis">手机:&nbsp;{{elseUserInfo.mobile||''}}</text>
            </view>
        </view>
        <!-- 输入 -->
        <label class="g-input">
            <text class="red">对方ID</text>
            <input type="number" v-model="nUserId" @blur="getUserID" placeholder="请输入对方ID">
        </label>
		
		<block v-if="loadData.state == 0">
			<label class="g-input">
			    <text class="red">互转粮仓</text>
			    <input type="number" v-model="nPrice" placeholder="请输入米粮">
			</label>
			<view class="g-tips2">
			    <text>粮仓可转&nbsp;</text>
			    <text class="yellow">￥{{total}}</text>
			</view>
			<view class="g-tips3">
			    <view>互转将直接到达对方粮仓</view>
			    <view>退取货互转粮仓，系统默认优先使用旧粮仓（2019.3.16前新增的粮仓为旧粮仓）</view>
			    <text>粮仓互转需2%手续费</text>
			</view>
		</block>
        
		<block v-if="loadData.state == 1">
			<label class="g-input">
				<text class="red">互转恒朗宝</text>
				<input type="number" v-model="nPrice" placeholder="请输入数量">
			</label>
			<view class="g-tips2">
			    <text>恒朗宝可转&nbsp;</text>
			    <text class="yellow">￥{{total}}</text>
			</view>
			<view class="g-tips3">
			    <view>互转将直接到达对方恒朗宝</view>
			</view>
		</block>
        
        <button class="u-confirm" @tap="confirm">转出</button>
		<!-- 输入密码弹出 -->
        <paymentPassword :show="showPopup" digits="6" @confirm="onConfirm" @cancel="togglePopup('payFlag')"></paymentPassword>
		
		<!-- 确认信息弹出 -->
		<view class="g-frame-mask" v-if="showPopup" @tap="togglePopup('confirm')"></view>
		<view class="g-frame" v-if="showPopup">
			<view class="m-frame-header">
			    <view class="u-frame-title">提示</view>
			    <image class="u-frame-close" src="../../static/icons/ydt/close.png" mode="widthFix" @tap="togglePopup('payFlag')"></image>
			</view>
			<view class="u-frame-cont" v-if="loadData.state == 0">本次互转{{price}}粮仓，请确认</view>
			<view class="u-frame-cont" v-if="loadData.state == 1">本次互转{{price}}恒朗宝，请确认</view>
			<view class="m-frame-footer">
			    <view class="u-reset" @tap="togglePopup('confirm')">取消</view>
			    <view class="u-confirm-c" @tap="toConfirm">确定</view>
			</view>
		</view>
		
        <!-- 成功弹出 -->
        <view class="g-popup" v-if="isTransOk">
            <view class="g-popup-info">
                <image class="u-popup-sign" src="../../static/images/user/seleted.png" mode="widthFix"></image>
                <view class="u-popup-title">互转成功</view>
                <view class="u-popup-desc">互转后即时到账，若未及时到账请联系客服人员</view>
				<!-- 粮仓互转 -->
				<view class="g-popup-user" v-if="loadData.state == 0">
					<view class="item">
						<text>收粮ID</text>
						<text>{{nUserId}}</text>
					</view>
					<view class="item">
						<text>转出米粮</text>
						<text>¥{{nPrice}}</text>
					</view>
					<view class="item">
						<text>实际收粮</text>
						<text class="red">¥{{in_money}}</text>
					</view>
				</view>
				<!-- 恒朗宝互转 -->
				<view class="g-popup-user" v-if="loadData.state == 1">
					<view class="item">
						<text>到账ID</text>
						<text>{{nUserId}}</text>
					</view>
					<view class="item">
						<text>转出恒朗宝</text>
						<text>¥{{nPrice}}</text>
					</view>
					<view class="item">
						<text>实收恒朗宝</text>
						<text class="red">¥{{in_money}}</text>
					</view>
				</view>
            </view>
			<view class="btns">
				<button class="u-confirm" @tap="closePopup()">返回</button>
				<button class="u-confirm" @tap="closePopup('deital')">查看明细</button>
			</view>
        </view>
		
		
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
    </view>
</template>

<script>
    import henglang from '@/common/common.js'
    
    export default {
        data() {
            return {
                nUserId: '',
                nPrice: '',
				userInfo:[],
				elseUserInfo:[],
				isShowLoading: false,
				total:0,
				isTransOk:false,
				isGetUserID: false,
				in_money:'',
				loadData:{},
				payFlag:false,
				showPopup:false
            };
        },
        methods: {
			togglePopup(type){
				switch(type){
					case 'payFlag':
						this.payFlag = !this.payFlag
					break;
					case 'confirm':
						this.showPopup = !this.showPopup
					break;
				}
			},
            confirm() {
				let that = this
				let url = ''
                if (that.nUserId.length < 4 || !that.isGetUserID) {
					henglang.showToast('请输入正确ID号')
                    return;
                }else if(!that.nPrice || Number(that.nPrice) <= 0 || Number(that.nPrice) > Number(that.total)){
					henglang.showToast('请输入正确的米粮')
					return;
				}else if(Number(that.nPrice)%100 !== 0 && that.loadData.state == 0){
					henglang.showToast('每笔互转数量必须是100的倍数')
					return;
				}
				that.isShowLoading = true;
				if(that.isGetUserID){
					uni.hideKeyboard()
					that.isShowLoading = false;
					// uni.navigateTo({
					// 	url: '/pages/user/hl_checkpwd?pageType=transform' + '&user_id=' + that.nUserId + '&trans_amount=' + that.nPrice + '&price=' + that.nPrice + '&state=' + that.loadData.state
					// })
					that.togglePopup('confirm')
				}
				
            },
			getUserID(e) {
				let that = this
				let user_id = e.target.value
				that.isShowLoading = true
				henglang.post('transfer/getMember',{user_id:user_id},true,function(res){
					that.isShowLoading = false;
					if(res.data.code == 0){
						that.elseUserInfo = res.data.data;
						that.isGetUserID = true
					}else if(res.data.code == -1){
						henglang.showToast(res.data.msg)
						that.isGetUserID = false
					}
				});
			},
            closePopup(val) {
				this.isTransOk = false;
				if(val == 'deital'){
					uni.redirectTo({
						url:'/pages/common/bill?type=1'
					})
				}else{
					uni.redirectTo({
						url:'/pages/user/hl_transform'
					})
				}
            }
        },
        onLoad(option) {
			let that = this
			that.loadData = option
			that.isShowLoading = true
            that.userInfo = uni.getStorageSync('userInfo')
			henglang.get('member/hasPaypwd',{},true,function(res){
				that.isShowLoading = false;
				if(res.data.data.has_paypwd){
					henglang.post('transfer/availableMoney',{state:option.state},true,function(res){
						that.isShowLoading = false;
						if(res.data.code == 0){
							that.total = res.data.data.total.toFixed(2);
						}
					});
				}else{
					henglang.showToast('请先设置支付密码')
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/user/settings/set_checkpwd'
						})
					}, 3000)
				}
			});
			uni.setNavigationBarTitle({
				title:option.state == 0?'粮仓互转':'恒朗宝互转'
			})
        },
		onShow() {
			let that = this
			let pages = getCurrentPages();
	        let currPage = pages[pages.length-1];
	        if (currPage.data){
				that.isTransOk = currPage.data.isTransOk
				that.in_money = currPage.data.in_money
	        }
		}
    }
</script>

<style>
	.userbg{
		background: #e9625c;
	}
	.elsebg{
		background: #ae9df1;
	}
    .yellow {
        color: #f09e00;
    }
    .red {color: #D71511;}
    .page {
        background: #f2f2f2;
        min-height: 100vh;
    }
    
    /* 卡片提示 */
    .g-tips {
        padding: 20px 0 30px 0;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .g-user-info {
        width: 228upx;
        color: #fff;
        font-size: 24upx;
		height: 108upx;
		border-radius: 10upx;
		padding: 16upx;
    }
	.g-user-info .top{
		display: flex;
		align-items: center;
	}
    .u-user-name {
        width: 160upx;
		margin-left: 10upx;
		display: block;
    }

    .u-user-phone {
		display: block;
		margin-top: 10upx;
		margin-left: 5upx;
    }

    .g-user-info image {
        width: 56upx;
		height: 56upx;
		display: block;
    }

    .g-tips-text {
        text-align: center;
        position: relative;
        margin: 0 20upx;
    }

    .u-arrow {
        width: 140upx;
        height: 3px;
        border-radius: 4px;
        background: #ccc;
        margin: 10px 0;
        position: relative;
    }

    .u-arrow::after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 15px;
        height: 3px;
        background: #ccc;
        border-radius: 4px;
        transform-origin: right bottom;
        transform: rotate(45deg);
    }

    /* 输入 */
    .g-input {
        display: flex;
        align-items: center;
        padding: 10px 0 10px 10px;
        background: #fff;
        position: relative;
		border-bottom: 1rpx solid #F2F1F1;
		border-top: 1rpx solid #F2F1F1;
    }
	.g-input:first-child{
		border-bottom: 0;
	}

    .g-input>text {
        margin-right: 10px;
    }

    .g-input>input {
        flex: 1;
    }

    .g-pay-way {
        margin-top: 20upx;
    }
    .g-tips2 {
        padding: 10px 0 10px 10px;
    }
	.g-tips2 .yellow{
		font-size: 36upx;
		margin-left: 10upx;
	}
    .g-tips3 {
        padding: 10px;
        background: #fff;
        color: #5e5e5e;
    }
    .g-tips3 > text {
        color: #d71511;
    }
    .u-confirm {
		flex: 1;
        background: #d71611;
		margin: 50upx 20upx;
        color: #fff;
        padding: 12px 0;
        border-radius: 100px;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
    
    /* 弹框 */
    .g-popup {
        position: fixed;
        top: 0;
        left: 0;
        background: #f2f2f2;
        width: 100%;
        box-sizing: border-box;
        height: 100vh;
        z-index: 9;
    }
    .g-popup-info {
		width: 669upx;
		height: 605upx;
		background-image: url('~@/static/images/user/card3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
		margin-top: 40upx;
		position: relative;
    }
    .u-popup-sign {
        width: 180upx;
        height: 180upx;
		display: block;
		margin: 0 auto;
		padding: 40upx 0;
    }
    .u-popup-title {
        font-weight: bold;
        font-size: 32upx;
		text-align: center;
    }
    .u-popup-desc {
        color: #888;
		text-align: center;
		padding-top: 10upx;
    }
    
    .g-popup-user {
		position: absolute;
		bottom: 10upx;
		left: 0;
		padding: 0 10%;
		width: 80%;
    }
	.g-popup-user .item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 5upx;
	}
    .u-price-tips {
        max-width: 120upx;
        word-break: break-word;
    }
	.g-popup .btns{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.g-frame {
	    width: 581upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 50%;
	    overflow: hidden;
	    left: 50%;
		margin-top: -215upx;
		margin-left: -290upx;
		z-index: 12;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
		margin-bottom: 35upx;
	}
	.u-frame-title {
	    width: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	}
	
	.u-frame-close {
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    position: absolute;
	    top: 50%;
		margin-top: -21upx;
	    right: 32upx;
	}
	.u-frame-cont{
		text-align: center;
		font-size: 36upx;
		padding-bottom: 35upx;
		line-height: 60upx;
		width: 500upx;
		margin: 0 auto;
	}
	.m-frame-footer {
	    height: 100upx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 100upx;
	    text-align: center;
	    font-size: 32upx;
	}
	
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm-c {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16upx;
	}
	
</style>
